<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        body{
            background-color: #e5e5e5;
        }
        ul{
            width: 1200px;
            height: 500px;
            /* background-color: pink; */
            margin-left: 200px;
            
        }
        ul li {
            width: 217px;
            height: 198px;
            background-color: white;
            float: left;
            margin: 10px;
            
        }
        ul li img{
            width: 217px;
            height: 117px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        ul li img:hover{
            cursor: pointer;
            width: 250px;
            transform: translate(5px,5px);
        }
        .price{
            color: red;
            font-weight: 500;
            margin-top: 5px;
        }
        /* .active{
            width: 230px;
            cursor: pointer;
        } */
    </style>
</head>
<body>
    <!-- <div class="containner">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> -->
    <script>
        var data = [
            {
                id: 1,
                url: '	http://cd.codingke.com/files/course/2019/02-18/191211b0e379129622.jpg',
                title: '威哥经典Java入门核心技术视...',
                price: 299.00
            },
            {
                id: 2,
                url: '	http://cd.codingke.com/files/course/2022/03-31/1719153e700e383976.jpg',
                title: '全套HTML+CSS零基础入门到精通视频教程',
                price: 99.00
            },
            {
                id: 3,
                url: '	http://cd.codingke.com/files/course/2018/09-12/150646685b31098531.jpg',
                title: 'Python爬虫从入门到高级实战精品课',
                price: 128.00
            },
            {
                id: 4,
                url: '	http://cd.codingke.com/files/course/2019/02-18/190118e1439b945368.png',
                title: 'RPG游戏从框架到实战',
                price: 98.00
            },
            {
                id: 5,
                url: '	http://cd.codingke.com/files/course/2022/03-11/1038339dee01369891.jpg',
                title: '杨哥最新Linux云计算系列②：CentOS 7.3管理及服务部署实战',
                price: 99.00
            },
            {
                id: 6,
                url: '	http://cd.codingke.com/files/course/2019/02-18/191211b0e379129622.jpg',
                title: '威哥经典Java入门核心技术视频教程',
                price: 399.00
            },
            {
                id: 7,
                url: '	http://cd.codingke.com/files/course/2018/09-12/150708cd6810682587.jpg',
                title: '威哥经典Java入门核心技术视频教程',
                price: 69.00
            },
            {
                id: 8,
                url: '	http://cd.codingke.com/files/course/2019/11-18/1631142cf04d464261.jpg',
                title: '物联网C++语言基础入门开发视频教程',
                price: '￥'+89.00
            },
            {
                id: 9,
                url: '	http://cd.codingke.com/files/course/2017/11-23/1743473dd37a987557.jpg',
                title: '软件测试编程技术',
                price: '￥'+119.00
            },
            {
                id: 10,
                url: '		http://cd.codingke.com/files/course/2019/02-18/1802102a78fc084442.png',
                title: 'UI设计综合实战案例大集合',
                price: '￥'+69.00
            },
        ]
        var str = '<ul>'
            for(var i =0;i<data.length;i++){
                str += '<li>'
                    str += '<img src='+data[i].url+'>'
                    str += '<p>'+data[i].title+'</p>'
                    str += '<p class="price">￥'+data[i].price+'</p>'
                str += '</li>'
            }
            str += '</ul>'
            document.write(str)
            // var imgEle = document.querySelectorAll('img')
            // imgEle.addEventListener = ('onmouseover',function () { 
            //     imgEle.classList.style = 'active'
            
    </script>
</body>

</html>